<template>
	<vp-main-page @refresh="loadDataList">
		<template #search>
			<el-form label-suffix=":" ref="searchFormRef" :model="searchForm" @submit.prevent
				@keyup.enter="loadDataList" label-width="120px">
				<vp-search-row :show-more="showMore">
					<vp-search-col>
						<el-form-item prop="dateList">
							<template #label><vp-label zh="合同日期" en="" /></template>
							<el-date-picker v-model="searchForm.dateList" type="daterange"
								start-placeholder="开始日期/Start Date" end-placeholder="结束日期/End Date"
								value-format="YYYY-MM-DD" unlink-panels range-separator="-" style="width: 100%">
							</el-date-picker>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="bh">
							<template #label><vp-label zh="合同号" en="" /></template>
							<el-input v-model="searchForm.bh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="xgfms">
							<template #label><vp-label zh="供应商/相关方" en="" /></template>
							<el-input v-model="searchForm.xgfms" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="jh">
							<template #label><vp-label zh="件号/产品名" en="" /></template>
							<el-input v-model="searchForm.jh" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="mc">
							<template #label><vp-label zh="名称" en="" /></template>
							<el-input v-model="searchForm.mc" v-trim placeholder="" clearable></el-input>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="lx">
							<template #label><vp-label zh="合同类型" en="" /></template>
							<el-select class="w100" v-model="searchForm.lx" clearable>
								<el-option :value="10" label="采购/"></el-option>
								<el-option :value="20" label="送修/"></el-option>
								<el-option :value="30" label="借入/"></el-option>
								<el-option :value="40" label="借出/"></el-option>
								<el-option :value="50" label="交换/"></el-option>
								<el-option :value="70" label="出租/"></el-option>
								<el-option :value="80" label="销售/"></el-option>
								<el-option :value="90" label="索赔/"></el-option>
								<el-option :value="999" label="其他/"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>
					<vp-search-col>
						<el-form-item prop="ztList">
							<template #label><vp-label zh="状态" en="" /></template>
							<el-select class="w100" v-model="searchForm.ztList" multiple filterable placeholder="请选择" clearable>
								<el-option :value="10" label="草稿/"></el-option>
								<el-option :value="20" label="提交/"></el-option>
								<el-option :value="98" label="作废/"></el-option>
								<el-option :value="99" label="关闭/"></el-option>
							</el-select>
						</el-form-item>
					</vp-search-col>

					<vp-search-col btn-col>
						<vp-btn-search :loading="loading" @click="loadDataList" />
						<vp-btn-reset @click="handleSearchReset" />
						<vp-btn-more @change="showMore = $event" />
					</vp-search-col>
				</vp-search-row>
			</el-form>
		</template>
		<template #actions>
			<el-space>
				<vp-btn-add v-auth="'materialContract.edit'" @click="handleAdd" />
			</el-space>
		</template>
		<template #table>
			<vp-vxe-table id="baseDataModel" ref="tableRef" :data="tableData" row-key="id" v-loading="loading">
				<vxe-column type="seq" align="center" title="#" width="50" />
				<vxe-column field="bh" show-overflow>
					<template #header><vp-label zh="合同号" en="" /></template>
				</vxe-column>
				<vxe-column field="zt" show-overflow width="110">
					<template #header><vp-label zh="状态" en="Status" /></template>
					<template #default="scope">
						{{
							scope.row.zt === 10 ? '草稿 Draft' :
								scope.row.zt === 20 ? '提交/' :
									scope.row.zt === 98 ? '作废/' :
										scope.row.zt === 99 ? '关闭/' : ''
						}}
					</template>
				</vxe-column>
				<vxe-column field="lx" show-overflow width="70">
					<template #header><vp-label zh="类型" en="" /></template>
					<template #default="scope">
						<vp-label v-if="scope.row.lx == 20" zh="设备" en="" />
						<vp-label v-if="scope.row.lx == 10" zh="采购" en="" />
						<vp-label v-if="scope.row.lx == 20" zh="送修" en="" />
						<vp-label v-if="scope.row.lx == 30" zh="借入" en="" />
						<vp-label v-if="scope.row.lx == 40" zh="借出" en="" />
						<vp-label v-if="scope.row.lx == 50" zh="交换" en="" />
						<vp-label v-if="scope.row.lx == 70" zh="出租" en="" />
						<vp-label v-if="scope.row.lx == 80" zh="销售" en="" />
						<vp-label v-if="scope.row.lx == 90" zh="索赔" en="" />
						<vp-label v-if="scope.row.lx == 999" zh="其他" en="" />
					</template>
				</vxe-column>
				<vxe-column field="htrq" show-overflow width="120">
					<template #header><vp-label zh="日期" en="" /></template>
				</vxe-column>
				<vxe-column field="xgfms" show-overflow>
					<template #header><vp-label zh="供应商/相关方" en="" /></template>
				</vxe-column>
				<vxe-column field="jffs" show-overflow width="120">
					<template #header><vp-label zh="支付方式" en="" /></template>
				</vxe-column>
				<vxe-column field="jylx" show-overflow width="120">
					<template #header><vp-label zh="交易类型" en="" /></template>
				</vxe-column>
				<vxe-column field="whryName" show-overflow width="120">
					<template #header><vp-label zh="维护人" en="" /></template>
				</vxe-column>

				<vxe-column field="whsj" show-overflow width="180">
					<template #header><vp-label zh="维护时间" en="" /></template>
				</vxe-column>
				<vxe-column field="operation" title="操作 Operations" fixed="right" width="220">
					<template #header><vp-label-operations /></template>
					<template #default="scope">
						<el-space>
							<vp-btn-edit v-if="scope.row.zt == 10" v-auth="'materialContract.edit'" text
								@click="handleEdit(scope.row)" />
							 <vp-btn text v-auth="'materialContract.edit'" v-if="scope.row.zt==20"
                                @click="handleRevision(scope.row)">
                                <vp-label zh="修订" en="Revision" />
                            </vp-btn>
							 <vp-btn text v-auth="'materialContract.edit'" v-if="scope.row.zt==20"
                                @click="handleClear(scope.row)">
                                <vp-label zh="关闭" en="Revision" />
                            </vp-btn>
							 <vp-btn text v-auth="'materialContract.edit'" v-if="scope.row.zt==20"
                                @click="handleInvalid(scope.row)">
                                <vp-label zh="作废" en="Revision" />
                            </vp-btn>
							<vp-btn-del v-if="scope.row.zt == 10" v-auth="'materialContract.edit'" text
								@click="handleDelete(scope.row)" />
							<vp-btn-view text @click="handleView(scope.row)" />
						</el-space>
					</template>
				</vxe-column>
			</vp-vxe-table>
		</template>
		<template #pagination>
			<vp-pagination @change="loadDataList" :total="page.total" v-model:currentPage="page.pageNum"
				v-model:pageSize="page.pageSize">
			</vp-pagination>
		</template>
		<EditContract ref="editRef" @formSubmited="handleFormSubmited"></EditContract>
	</vp-main-page>
</template>
<script setup lang="ts" name="list">
import { onMounted, reactive, ref } from 'vue'
import request from '/@/utils/request';
import { DEFAULT_PAGE } from '/@/utils/page';
import EditContract from './component/EditContract.vue';
import VpMessageBox from '/@/components/vp/VpMessageBox';

import { useRouter } from 'vue-router';
const router = useRouter();


const searchForm = reactive({
	dateList: [],
	ztList: [20,98,99] as number[],
	bh: "",
	lx: "",
	mc: "",
	jh: "",
	xgfms: "",
});

const page = reactive({
	...DEFAULT_PAGE,
})

const showMore = ref(false);
const loading = ref(false);
const tableData = ref([]);

// 加载列表数据
const loadDataList = () => {
	loading.value = true
	request.get('/material/contract/pageList', {
		params: {
			...searchForm,
			...page
		}
	}).then(res => {
		tableData.value = res?.data?.list || []
		page.total = res?.data?.total || 0
		page.pageNum = res?.data?.pageNum || 1;
	}).finally(() => {
		loading.value = false;
	})
}

const searchFormRef = ref();
// 重置搜索条件
const handleSearchReset = () => {
	searchForm.dateList = [];
	searchForm.ztList = [20,98,99];
	searchForm.jh = "";
	searchForm.bh = "";
	searchForm.lx = "";
	searchForm.mc = "";
	searchForm.jh = "";
	searchForm.xgfms = "";
	searchFormRef.value.resetFields();
	loadDataList();
}

onMounted(() => {
	loadDataList();
})

const editRef = ref();
const tableRef = ref();

const handleAdd = () => {
	editRef.value.handleOpen('add');
}

const handleEdit = (row: any) => {
	editRef.value.handleOpen('edit', row.id);
}

const handleRevision= (row: any) => {
	editRef.value.handleOpen("revision",row.id);
}

const handleFormSubmited = () => {
	loadDataList();
}

const handleView = (row: any) => {
	router.push({
		name: "viewContract",
		params: {
			id: row.id,
		},
	})
}

// 删除
const handleDelete = (row: any) => {
	VpMessageBox.confirmDelete().then(() => {
		loading.value = true;
		request.delete(`/material/contract/${row.id}`).then(res => {
			loadDataList();
		}).catch(() => { }).finally(() => {
			loading.value = false;
		})
	});
}

const handleClear = (row: any) => {
	VpMessageBox.confirmOperation().then(() => {
		loading.value = true;
		request.post(`/material/contract/clear/${row.id}`).then(res => {
			loadDataList();
		}).catch(() => { }).finally(() => {
			loading.value = false;
		})
	});
}

const handleInvalid=(row: any) => {
	VpMessageBox.confirmDiscard().then(() => {
		loading.value = true;
		request.post(`/material/contract/invalid/${row.id}`).then(res => {
			loadDataList();
		}).catch(() => { }).finally(() => {
			loading.value = false;
		})
	}); 
}
</script>
